import { appendSDKQuery } from '@/sdk/host'
import './index.module.less'

export default function CustomPage(props: { url: string }) {
  const { url: rawUrl } = props
  const url = useMemo(() => appendSDKQuery(rawUrl), [rawUrl])

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [iframe, setIframe] = useState<HTMLIFrameElement | null>(null)
  const onIframeCreated = useCallback((elm: HTMLIFrameElement | null) => {
    if (elm) setIframe(elm)
  }, [])

  return <div styleName="custom-page">
    <iframe src={url} ref={onIframeCreated} />
  </div>
}
